<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="form-tool-right mb15">
        <el-input
          size="small"
          placeholder="请输入用户名"
          style="max-width: 180px"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <elementSearch />
            </el-icon>
          </template>
        </el-input>
        <el-button size="small" type="primary" class="ml10">
          <el-icon>
            <elementSearch />
          </el-icon>
          查询
        </el-button>
      </div>
      <el-table :data="state.tableData.data" stripe style="width: 100%">
        <el-table-column prop="num" label="ID" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="用户名" show-overflow-tooltip></el-table-column>
        <el-table-column label="头像" show-overflow-tooltip>
          <template #default="scope">
            <el-image
              class="system-user-photo"
              :src="scope.row.photo"
              :preview-src-list="[scope.row.photo]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="time" label="加入时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="roles" label="角色" show-overflow-tooltip min-width="120">
          <template #default="scope">
            <el-tag
              v-for="item in scope.row.roles"
              :key="item"
              size="small"
              class="system-user-tag"
            >{{ item }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="path" label="操作" min-width="100">
          <template #default="scope">
            <el-button size="mini" type="text">
              <el-icon>
                <elementEdit />
              </el-icon>
              修改
            </el-button>
            <el-button size="mini" type="text" @click="onRowDel(scope.row)">
              <el-icon>
                <elementDelete />
              </el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange"
        class="mt15"
        :pager-count="5"
        :page-sizes="[10, 20, 30]"
        :current-page="state.tableData.param.pageNum"
        background
        :page-size="state.tableData.param.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.tableData.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
const state: any = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});
// 初始化表格数据
const initTableData = () => {
	const data: Array<object> = [];
	for (let i = 0; i < 10; i++) {
		data.push({
			num: `00${i + 1}`,
			name: (Math.round(Math.random() * 20901) + 19968).toString(16),
			photo:
				'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1633081619,2004077072&fm=26&gp=0.jpg',
			phone: Math.floor(Math.random() * 10000000000),
			email: `${Math.floor(Math.random() * 1000)}@qq.com`,
			sex: i % 2 === 0 ? '男' : '女',
			time: new Date().toLocaleDateString(),
			roles: Math.round(Math.random() + 1) > 1 ? ['admin', 'test'] : ['admin'],
		});
	}
	state.tableData.data = data;
	state.tableData.total = state.tableData.data.length;
};
// 当前行删除
const onRowDel = (row: object) => {};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageSize = val;
};
// 页面加载时
onMounted(() => {
	initTableData();
});
</script>

<style scoped lang="scss">
.system-user-container {
	.system-user-photo {
		width: 40px;
		height: 40px;
		border-radius: 100%;
	}
	.system-user-tag {
		margin: 0 5px;
	}
}
</style>
